// import React, { Component, PureComponent } from "react";

// class Child extends PureComponent {
//   render() {
//     console.log("child render");
//     return <div>child组件</div>;
//   }
// }

// const obj = { fontSize: 14 };

// class App extends Component {
//   state = {
//     count: 1,
//   };
//   fn = () => {
//     this.setState({
//       count: 2,
//     });
//   };
//   fn2 = () => {
//     console.log("do something");
//   };
//   render() {
//     return (
//       <>
//         <h2>useCallback</h2>
//         <div>{this.state.count}</div>
//         <button onClick={this.fn}>btn</button>
//         <Child style={obj} doSomething={this.fn2} />
//       </>
//     );
//   }
// }

// export default App;

// todo memo是一个高阶组件，给函数组件用的，作用和PureComponent完全相同
// todo useCallback用于缓存函数
// todo 第一个参数是需要被缓存的函数，第二个参数是一个依赖数组

// todo 当有函数要作为自定义事件的时候，这个函数就需要加useCallback
import React, { useState, memo, useMemo } from "react";

const Child = memo(() => {
  console.log("child render");
  return <div>child组件</div>;
});

const App = () => {
  const [count, setCount] = useState(1);
  const fn = () => {
    setCount((v) => v + 1);
  };

  // const fn2 = useCallback(() => {
  //   console.log("do something");
  // }, []);
  const fn2 = useMemo(() => {
    return () => {
      console.log("do something");
    };
  }, []);

  return (
    <>
      <h2>useCallback</h2>
      <Child doSomething={fn2} />
      <p>{count}</p>
      <button onClick={fn}>btn</button>
    </>
  );
};

export default App;
